<template>
  <basic-container>
    <div>
      <avue-data-operatext :option="option" style="height: 100%"/>
      <el-divider>
        <el-button type="text"
                   :loading="loading"
                   :disabled="onLoadDisabled"
                   @click="handleMoreChange">{{onLoadBtn}}
        </el-button>
      </el-divider>
    </div>

    <el-dialog title="详情" :visible.sync="dialogDetailVisible">
      <el-button
        type="success"
        plain
        style="margin-left: 20px"
        icon="el-icon-arrow-left"
        @click="$router.push({
          path: '/education/classroomdetails',
          query: {
            id: formObj.id,
            courseName: encodeURIComponent(formObj.name)
          }
        })">进入课堂
      </el-button>
      <el-button
        type="primary"
        plain
        style="margin-left: 20px"
        icon="el-icon-edit"
        @click="dialogHandleEdit">{{dialogEditBtn}}
      </el-button>
      <el-divider />
      <avue-form :option="formOption" v-model="formObj" @submit="submit"></avue-form>
    </el-dialog>
  </basic-container>
</template>

<script>
  import {getList} from "@/api/education/classroom";
  import {formOption} from "@/const/crud/education/classroom";
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
        loading: false,
        onLoadDisabled: true,
        dialogDetailVisible: false,
        page: {
          pageSize: 12,
          currentPage: 1,
          total: 0
        },
        option: {
          span: 6,
          data: []
        },
        type: false,
        formObj: {},
        formOption: formOption
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.course_add, false),
          viewBtn: this.vaildData(this.permission.course_view, false),
          delBtn: this.vaildData(this.permission.course_delete, false),
          editBtn: this.vaildData(this.permission.course_edit, false)
        };
      },
      dialogEditBtn() {
        return this.type === false ? '编 辑' : '取 消'
      },
      onLoadBtn() {
        let flag = this.page.total > this.option.data.length - 1;
        this.onLoadDisabled = !flag;
        return flag ? '加载更多' : '没有更多数据了';
      }
    },
    created() {
      this.onLoad();
    },
    methods: {
      dialogHandleEdit() {
        this.formOption.detail = this.type;
        this.type = !this.type;
      },
      onLoad() {
        this.option.data = [];
        let addData = {
          click: (item) => {
            this.$message.success("添加")
          },
          title: '创建课程',
          img: '/img/icon/classroom-plus.jpg',
          color: '#f8f8f8',
        }
        this.option.data.push(addData);
        this.getDataList(this.page);
      },
      handleMoreChange(params = {}) {
        this.page.currentPage ++;
        this.getDataList(this.page, params);
      },
      getDataList(page, params = {}) {
        this.loading = true;
        getList(
          page.currentPage,
          page.pageSize,
          Object.assign(params, this.query)
        ).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          data.records.forEach(row => {
            let itemData = {
              click: (item) => {
                this.dialogDetailVisible = true;
                this.formObj = row;
              },
              title: row.name,
              subtitle: '',
              img: '/img/icon/classroom-default.jpg',
              color: '#00a7d0',
              list: [{
                label: '教师',
                value: row.teacherRealName
              }, {
                label: '成员',
                value: row.memberNum
              }, {
                label: '课堂码',
                value: 'code'
              }]
            };
            this.option.data.push(itemData);
          })
          this.loading = false;
        });
      }
    }
  };
</script>

<style lang="scss">
.avue-data-operatext {
  .el-row {
    .item {
      .item-content {
        height: 91px !important;
        background-color: #f8f8f8;
      }
    }

  }
}
</style>
